<template>
  <div>
    <div class="btn-row">
      <el-button type="primary" @click="doAdd(1)">新增一级分类</el-button>
      <el-button @click="handExpandAll">全部展开/收起</el-button>
    </div>
    <tree-table ref="treeTable" 
      :data="dataList" 
      :columns="columns" 
      :evalArgs="args"
      v-loading="listLoading"
      class="tree-table mar-t-20"
      header-cell-class-name="default-header" 
      row-class-name="default-row tree-row"
      :expand-all="expandAll" 
      :isSelect="false"
      element-loading-text="加载中"        
      style="width: 100%;">
      <template>
        <el-table-column width="480px" label="分类名称">
          <template slot-scope="scope">
            <div class="flex v-align-c">
              <!-- 留白样式 -->
              <span v-if="scope.row.categoryLevel === 1" class="ms-tree-space" :class="'space-' + scope.row.categoryLevel"></span>
              <span v-else-if="scope.row.categoryLevel === 2" class="ms-tree-space" :class="'space-' + scope.row.categoryLevel"></span>
              <span v-else-if="scope.row.categoryLevel === 3" class="ms-tree-space" :class="'space-' + scope.row.categoryLevel"></span>
              <span>{{ scope.row.categoryName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="文章数" prop="goodsCount">
          <template slot-scope="scope">
            <div class="flex v-align-c">
              <span v-if="scope.row.categoryLevel === 1" class="ms-tree-space" :class="'space-' + scope.row.categoryLevel"></span>
              <span v-else-if="scope.row.categoryLevel === 2" class="ms-tree-space" :class="'space-' + scope.row.categoryLevel"></span>
              <span v-else-if="scope.row.categoryLevel === 3" class="ms-tree-space" :class="'space-' + scope.row.categoryLevel"></span>
              <div>{{ scope.row.goodsCount }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="150px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <template>
              <el-button v-if="scope.row.categoryLevel == 1" type="text" size="medium" @click="doAdd(2)">新增二级分类</el-button>
              <el-button v-if="scope.row.categoryLevel == 2" type="text" size="medium" @click="doAdd(3)">新增三级分类</el-button>
            </template>
            <el-popconfirm title="您确定删除吗？" @onConfirm="doRemove(scope.row)">
              <el-button type="text" size="medium" slot="reference" class="mar-l-5">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </tree-table>
    <!-- 新增/编辑分类 -->
    <el-dialog title="编辑分类" :visible.sync="categoryVisible" width="480px" append-to-body>
      <el-form :model="categoryForm" ref="categoryForm" label-width="150px" :rules="rules">
        <el-form-item label="分类名称：" prop="categoryName">
          <el-input v-model="categoryForm.categoryName" class="width-250"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="categoryVisible = false">取消</el-button>
        <el-button type="primary" @click="doSaveCategory">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import treeTable from '../category-tree'
export default {
  components: { treeTable },
  data() {
    return {
      dataList: [],
      columns: [
        {
          text: '',
          width: 50
        }
      ],
      args: [],
      listLoading: false,
      // 全展开flag
      expandAll: true,
      chineselevelMap: {
        1: '一',
        2: '二',
        3: '三'
      },
      categoryVisible: false, // 新增分类弹窗
      // 新增分类请求参数
      categoryForm: {
        categoryName: ''
      },
      // 表单校验
      rules: {
        categoryName: [
          { required: true, message: '请输入分类名称！', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.initList()
  },
  methods: {
    // 页面初始加载
    initList() {
      this.dataList = [{
        categoryLevel: 1,
        categoryName: '大傻逼',
        goodsCount: 999,
        children: [{
          categoryLevel: 2,
          categoryName: '二傻逼',
          goodsCount: 600,
          children: [{
            categoryLevel: 3,
            categoryName: '三傻逼',
            goodsCount: 399
          }, {
            categoryLevel: 3,
            categoryName: '小三傻逼',
            goodsCount: 399
          }]
        }]
      }]
    },
    // 新增分类 1: 一级分类 2：二级分类 3：三级分类
    doAdd(val) {
      this.categoryVisible = true
    },
    // 删除分类
    doRemove(val) {},
    // 展开/收起事件
    handExpandAll() {
      this.expandAll = !this.expandAll
      this.initList()
    },
    // 保存新增分类
    doSaveCategory() {
      console.log(this.categoryForm)
      this.categoryVisible = false
      // 处理完新增之后将输入框置空
      this.categoryForm.categoryName = ''
    }
  }
}
</script>
<style lang="less" scoped>
.btn-row{
  .el-button{
    width: 120px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 0;
  }
}
/deep/ .tree-table .tree-row, /deep/ .tree-table .tree-row.hover-row {
  .cell {
    overflow: visible!important;
  }
}
.ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;    
  height: 14px;
  &.space-1 {
    width: 0px;
  }
  &.space-2 {
    width: 38px;
  }
  &.space-3 {
    width: 120px;
  }
  &::before {
    content: ""
  }
}
</style>
